<template>
    <div class="bigBox">
        <div class="courseBox">
            <div class="_img">
                <img src="../../assets/images/class/sp1.png" alt="">
                <div class="smallIcon ">
                    <img src="../../assets/images/class/sf.png" alt="">
                </div>
            </div>
            <div class="_text">
                <div class="_top">
                    <div class="left">
                        <div class="title">
                            非遗传统音乐
                        </div>
                        <div class="smalldetail">
                            <span>共15课时</span>
                            <span>3278人已学</span>
                        </div>
                        <div class="author">
                            <span>主讲：初七</span> <span>开课时间：2021-10-05</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="el-icon-star-off"></div>
                        <span>未收藏</span>
                    </div>
                </div>
                <div class="_bottom">
                    <div class="price">￥199</div>
                    <div class="_button">
                        <el-button class="buyClass">购买课程</el-button>
                        <el-button class="tryLook">试看</el-button>
                    </div>
                </div>
            </div>
        </div>
        <hr style="margin:0 100px" color='#7f7f7f' size='2px' />
        <div class="detail">
            <div class="introduce">
                <div class="title">
                    <span class="symbol">|</span>
                    <span >课程介绍</span>
                </div>
                <div class="contain">
                    <p>本课程主要介绍了非遗传统音乐的<br>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
                </div>
            </div>
            <div class="list">
                <div class="title">
                    <span class="symbol">|</span>
                    <span >课程目录</span>
                    <span class = 'smallTitle'>（共15课时）</span>
                </div>
                <ul style="list-style:none">
                    <li>一、非遗传统音乐介绍
                        <ul style="list-style:none">
                            <li v-for="item in 5" v-bind:key = 'item'>
                                <div class="liBox">
                                    <div class="text">1.{{ item }}xxxxxxxxxxxxxx</div>
                                    <div class="time">
                                        <img src="../../assets/images/class/sz.png" alt="">
                                       54.35
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>二、非遗传统音乐作曲法
                        <ul style="list-style:none">
                            <li v-for="item in 5" v-bind:key = 'item'>
                           <div class="liBox">
                                    <div class="text">2.{{ item }}xxxxxxxxxxxxxx</div>
                                    <div class="time">
                                        <img src="../../assets/images/class/sz.png" alt="">
                                       54.35
                                    </div>
                                </div>

                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
    .bigBox{
        width: 100%;
        .courseBox{
            width: 100%;
            display: flex;
            flex-direction: row;
            ._img{
                margin: 100px 100px;
                position: relative;
                font-size: 30px;
               img{
                   width: 870px; height: 550px;
               }
               .smallIcon{
                   img{
                       width: 50px;
                       height: 65px;
                       position: absolute;
                       left: 0%;
                       bottom: 90%;
                   }
               }
            }
            ._text{
                margin: 100px 100px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                ._top{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    font-size: 24px;
                    .title{
                        font-size: 40px;
                        font-weight: 800;
                        margin-bottom: 50px;
                    }
                    .smalldetail{
                        margin-bottom: 50px;
                        span{
                            margin-right: 100px;
                        }
                    }
                    .author{
                        color: #aaaaaa;
                        span{ margin-right: 100px; }

                    }
                    .right{
                        
                    }
                }
            }
            ._bottom{
                .price{
                    font-size: 50px;
                    font-weight: 800;
                    color: #fe8c00;
                }
                .el-button{
                    width: 260px; height: 60px; border-radius: 30px; font-size: 24px;
                }
                .buyClass{
                    
                    background-color: #fe8c00;
                    margin-right: 60px;
                }
                .tryLook{
                    border: 1px solid red;
                    color: red;
                }

            }
            
        }
        .detail{ 
           // width: 100%; 
            margin:50px 100px; 
            font-size: 25px;
      
            .title { 
                margin-top: 20px; 
                margin-left: 20px; 
                font-size: 30px; 
                font-weight:1000; 
                .symbol { 
                    color: red;
                     font-size: 28px; 
                } 
              
                .smallTitle { 
                    font-weight: 500; 
                    margin: 0 10px; 
                    margin-right: 60px; 
                } 
                

             }
            .contain{ margin: 0 40px; }
            .list{
                .liBox{ 
                    display: flex; 
                    flex-direction: row; 
                    .text{
                        margin: 10px 40px;
                        
                    }
                    .time{
                        position: relative;
                        font-size: 15px;     
                        line-height: 50px;
                         color: #aaaaaa;
                        img{
                            width: 30px;
                            height: 30px;
                            position: absolute;
                            left: 50px;
                            bottom: 37%;
                        }
                    }
                }

            }
        
        }

    }
</style>